@fs1: 20px ;
@qs: 30px; //方块大小

body {
  text-align: center;
  width: 100%;
  min-width: 1520px;
  overflow: hidden;

  .title {
    h1 {
      margin-bottom: 0;
    }
    h2 {
      margin-top: 0;
    }
  }

  .game {
    width: 984px;
    height: auto;
    margin: auto;

    &:after {
      content: '';
      display: block;
      clear: left;
    }

    * {
      box-sizing: border-box;
    }
    .contain {
      width: 442px;
      height: 680px;
      float: left;
      background: lightblue;

      &:first-child {
        margin-right: 100px;
      }

      .name {
        width: 100%;
        text-align: center;
        height: 80px;
        line-height: 50px;
        font-size: @fs1;
        background: lightcyan;
      }

      .panel-msg {
        width: 140px;
        height: 600px;
        float: left;
        background: lightgoldenrodyellow;
        padding-top: 10px;

        .next {
          width: 120px;
          height: 120px;
          margin: 10px;
          position: relative;
        }

        .msg {
          width: 100%;
          text-align: center;
          font-size: @fs1;
        }
      }

      .panel-game {
        width: 300px;
        height: 600px;
        float: left;
        background: aliceblue;
        position: relative;
      }

      .square {
        width: 30px;
        height: 30px;
        border: 1px solid currentColor;
        background: currentColor;
        position: absolute;

        &.none {
          color: transparent;
        }

        &.done {
          color: darkgray;
        }

        &.current {
          color: lightpink;
          box-shadow: inset 0 0 10px lightgrey;
        }

      }
    }
  }
  
  .modal-body {
    text-align: center;

    &.win {
      height: 450px;
      background: url("../img/win.jpg") no-repeat;
      background-size: cover;
    }
    
    &.lose {
      height: 450px;
      background: url("../img/lose.jpg") no-repeat;
      background-size: cover;
    }
  }

  .modal-footer {
    text-align: center;
  }
}